	<template>
		<view class="container">
			<!-- 首页标题 -->
			<view class="title">门店详情</view>
			<view>
				<image class="back" src="/static/images/白色左箭头.png" mode="" @click="goBack"></image>
			</view>

			<view class="info" style="color: #5e5e5e; font-size: 12px;">
				<image src="/static/home/baoyang/storedetail.png" mode="" />
				<view style="font-size: 18px; margin: 15px 0 0 0; color: black;">
					大美汽车保养厂 （解放路店）
				</view>
				<view style="margin: 8px 0 8px 0;">
					⭐⭐⭐⭐ 4分 销量：556
				</view>
				<view style="margin: 3px 0;">
					营业时间：周一至周五 早上8:00-晚上22:00
				</view>
				<view style="margin: 3px 0;">
					位置：山阳区人民路与解放路交叉口
					<image src="/static/home/baoyang/plane@3x.png" style="width: 16px; height: 16px;" @click="goHere"/>
				</view>
			</view>

			<view class="server">
				<view style="font-size: 18px;">服务项目</view>
				<view class="server-item">
					<view>工时价格（每小时）</view>
					<view>￥35.9</view>
					<view>￥60</view>
				</view>
				<view class="server-item">
					<view>轮胎</view>
					<view>￥35.9</view>
					<view>￥60</view>
				</view>
				<view class="server-item">
					<view>······</view>
					<view>￥35.9</view>
					<view>￥60</view>
				</view>
			</view>

			<view class="server">
				<view style="font-size: 18px;">服务评价</view>
				<view class="evaluation-item" v-for="(evaluate, index) in evaluateList" :key="index" @click="evaluateList">
					<image src="/static/avatar.jpg" />
					<view class="evaluation-details">
						<view>
							<view style="font-size: 16px; color: black;">{{ evaluate.name }}</view>
							<view>{{ evaluate.time }}</view>
						</view>
						<view class="stars">
							<text v-for="n in evaluate.rating" :key="n" class="star">⭐</text>
							<text class="rating-text">&nbsp;&nbsp;{{ evaluate.rating }} 分</text>
						</view>
						<view>{{ evaluate.evaluation }}</view>
					</view>
				</view>

				<view class="footer">
					<button @click="openPopup">
						<uni-icons type="calendar" style="color: white;"></uni-icons>
						立即预约
					</button>
				</view>

				<uni-popup ref="popupRef" type="bottom" background-color="#fff" :border-radius="'10px 10px 0 0'">
					<view class="popup-container">
						<view class="popup-close" @click="closePopup">×</view>
						<view class="popup-header">
							<view class="popup-title">服务订单</view>
							<view class="title-line"></view>
						</view>

						<checkbox-group @change="checkboxChange" class="service-group">
							<label class="service-item" v-for="(item, index) in serviceList" :key="index">
								<checkbox :value="item.name" :checked="selectedServices.includes(item.name)"
									style="transform: scale(0.9); border-radius: 50%;" />
								<text class="service-name">{{ item.name }}</text>
								<text class="service-price">￥{{ item.price }}</text>
							</label>
						</checkbox-group>

						<view class="popup-footer">
							<view class="total-box">
								<text>合计：</text>
								<text class="total-amount">￥{{ totalPrice }}</text>
							</view>
							<button class="confirm-btn" @click="confirmOrder">确认已选服务</button>
						</view>
					</view>
				</uni-popup>
			</view>
			<!-- 评价列表循环结束后添加空白元素 -->
			<view class="bottom-spacer"></view>
		</view>
	</template>

	<script setup>
		import {
			ref,
			computed
		} from 'vue';

		const popupRef = ref(null);
		const openPopup = () => {
			popupRef.value.open('bottom')
		}

		const closePopup = () => {
			popupRef.value.close();
		}

		const serviceList = ref([{
				name: '日式水晶打蜡',
				price: 199
			},
			{
				name: '车身去氧化',
				price: 199
			},
			{
				name: '贴车衣',
				price: 199
			}
		]);

		const selectedServices = ref([]);

		const checkboxChange = (e) => {
			selectedServices.value = e.detail.value;
		}

		const totalPrice = computed(() => {
			return serviceList.value
				.filter(item => selectedServices.value.includes(item.name))
				.reduce((acc, cur) => acc + cur.price, 0);
		});

		const confirmOrder = () => {
			if (selectedServices.value.length === 0) {
				uni.showToast({
					title: '请至少选择一项服务',
					icon: 'none'
				});
				return;
			}
			// 这里可以添加提交订单的逻辑
			uni.navigateTo({
				url: "/pages/index/baoyang/nearbystores/storedetail/enterorder/enterorder"
			})
		};

		function goBack() {
			uni.navigateBack();
		}

		const evaluateList = ref([{
			name: '黄**',
			time: '2025-5-1',
			rating: 4,
			evaluation: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！'
		}, 
		{
			name: '李**',
			time: '2024-4-4',
			rating: 5,
			evaluation: '洗的非常不错不错不错，几个小伙子很不错不错不错，态度也很不错不错不错，强烈推荐来这家店洗车！！！'
		}, 
		{
			name: '张**',
			time: '2023-3-3',
			rating: 1,
			evaluation: '什么玩意儿！什么玩意儿！什么玩意儿！什么玩意儿！什么玩意儿！什么玩意儿！什么玩意儿！什么玩意儿！！！'
		}, 
		{
			name: '王**',
			time: '2025-1-1',
			rating: 2,
			evaluation: '说实话不太行！！！'
		}, 
		])
		
		function goHere() {
			uni.navigateTo({
				url: "/pages/index/baoyang/nearbystores/storedetail/navigation/navigation"
			})
		}
	</script>

	<style>
		.container {
			width: 100%;
			height: 400rpx;
			background-image: url(/static/homebg.png);
			background-size: 100%;
			top: 100px;
		}

		.title {
			color: white;
			width: 100%;
			text-align: center;
			padding-top: 12px;
			font-size: 18px;
		}

		.back {
			position: absolute;
			left: 30rpx;
			top: 34rpx;
			width: 15px;
			height: 15px;
			z-index: 2;
		}


		.info {
			width: 84%;
			margin: 10px auto;
			background-color: white;
			border-radius: 10px;
			padding: 20px 15px;
		}

		.info image {
			width: 100%;
			height: 400rpx;
			border-radius: 10px;
		}
		
		.stars {
			display: flex;
			align-items: center;
		}

		.star {
			color: #DDDDDD;
			font-size: 24rpx;
		}

		.server {
			width: 84%;
			padding: 20px 15px 0 15px;
			margin: 10px auto;
			background-color: white;
			border-radius: 10px;
			font-size: 14px;
		}

		.server-item {
			color: #5e5e5e;
			display: flex;
			border-bottom: gainsboro 1px solid;
			padding: 12px 0;
		}

		.server-item :nth-child(2) {
			margin-left: auto;
			color: #ff5625;
			font-size: 18px;
		}

		.server-item :nth-child(3) {
			margin: 5px;
			font-size: 12px;
			text-decoration: line-through;
			color: gray;
		}

		.evaluation-item {
			display: flex;
			justify-content: space-between;
			padding: 15px 0;
			font-size: 12px;
			border-bottom: #dfdfdf 1px solid;
		}

		.evaluation-item image {
			width: 20%;
			height: 100rpx;
			margin: 10px 10px 10px 0;
		}

		.evaluation-details {
			padding-bottom: 10px;
			width: 80%;
		}

		.evaluation-details view {
			padding: 3px 0;
		}

		.evaluation-details :nth-child(1) {
			display: flex;
			justify-content: space-between;
			color: gray;
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #f5f5f5;

		}

		.footer button {
			background-color: #1d6fff;
			color: white;
			width: 80%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			border-radius: 20px;
			font-size: 14px;
		}

		.popup-container {
			padding: 15px;
			position: relative;
			padding-bottom: 70px;
			/* 给底部按钮留空间 */
		}

		.popup-close {
			position: absolute;
			top: 15px;
			right: 15px;
			font-size: 22px;
			color: #999;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
		}

		.popup-title {
			font-size: 18px;
			font-weight: bold;
			margin: 15px 0 20px 15px;
			color: #333;
		}

		.service-group {
			margin-bottom: 20px;
		}

		.service-item {
			display: flex;
			align-items: center;
			padding: 15px;
			border-bottom: 1px solid #f5f5f5;
		}

		.service-name {
			flex: 1;
			margin-left: 10px;
			font-size: 15px;
			color: #333;
		}

		.service-price {
			color: #ff5625;
			font-size: 15px;
		}

		.popup-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
			border-top: 1px solid #eee;
		}

		.total-box {
			display: flex;
			align-items: center;
			font-size: 16px;
		}

		.total-amount {
			color: #ff5625;
			font-weight: bold;
			margin-left: 5px;
		}

		.confirm-btn {
			background-color: #ff7438;
			color: white;
			border-radius: 20px;
			height: 40px;
			line-height: 40px;
			padding: 0 25px;
			font-size: 14px;
			margin: 0;
		}

		/* 自定义圆形复选框样式 */
		checkbox .wx-checkbox-input,
		checkbox .uni-checkbox-input {
			border-radius: 50% !important;
			width: 20px !important;
			height: 20px !important;
		}

		checkbox .wx-checkbox-input.wx-checkbox-input-checked,
		checkbox .uni-checkbox-input.uni-checkbox-input-checked {
			background-color: #ff7438 !important;
			border-color: #ff7438 !important;
		}

		.popup-header {
			padding: 0 15px;
			margin-bottom: 15px;
		}

		.title-line {
			height: 1px;
			background-color: #f2f2f2;
			margin-top: 10px;
		}


		.popup-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-align: left;
			padding: 0;
			margin: 0;
		}
		
		.bottom-spacer {
		  height: 10vh; /* 占视口高度的10% */
		  width: 100%;
		}
	</style>